<%--
  Created by IntelliJ IDEA.
  User: zhangzehui
  Date: 2019/1/2
  Time: 4:58 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>向服务端发起请求</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<h1>版本1</h1>
<%--1.通过表单发起请求--%>

<form method="post" action="/StuServlet?method=addStu">
    输入姓名:<input type="text" name="stuName">
    <button>提交</button>
</form>

<hr>
<br>
<%--2.通过链接发起请求--%>
<a href="/StuServlet?method=delStu&stuId=s001">删除学生</a>


<hr>
<br>

<%--3.通过Ajax请求--%>
<button id="btn">利用AJAX向服务器端发起请求</button>
<hr>
<br>
<%--4.通过javaScript发起请求 --%>
<button id="btn02">利用javaScript 向服务器端发起请求</button>

</body>

<script>
    //页面加载完毕，为id是btn的按钮绑定点击事件，通过点击事件向服务器端发起Ajax请求
    $(function () {
        //页面加载完毕

        //为id是btn的按钮绑定点击事件
        $("#btn").click(function () {
            //通过点击事件向服务器端发起Ajax请求
            $.post("/StuServlet", {"method": "updateStu", "stuId": "s002"}, function (data) {
                console.log(data);
            })
        })

        //为id是btn02的按钮绑定点击事件
        $('#btn02').click(function () {
            location.href = "/StuServlet?method=findStu";
        });

    });
</script>
</html>
